// 获取添加时省市区三级联动数据
jiguan()
function jiguan() {
  // 获取省
  getOption('province')
  // 改变省数据时获取市的数据
  $('[name=province]').change(function () {
    getOption('city', $(this).val())
  })
  // 改变市数据时获取区
  $('[name=city]').change(function () {
    getOption('area', $('[name=province]').val(), $(this).val())
  })
}
/**
 * 获取省市区数据的方法
 * @param {*} type province|city|area
 * @param {*} provinceData  选中的省的数据
 * @param {*} cityData   选中的市的数据
 */
async function getOption(type, provinceData = '', cityData = '') {
  if (type === 'province') {
    const { data: provinceData } = await request.get('api/province')
    const pHtml = provinceData
      .map((item) => {
        return `<option value="${item}">${item}</option>`
      })
      .join('')
    $('[name=province]').html(`<option value="">--省份--</option>${pHtml}`)
  } else if (type === 'city') {
    // 获取选中的省份
    const pname = provinceData
    // 调接口
    const { data: cityData } = await request.get('api/city', {
      params: { pname },
    })
    const cHtml = cityData
      .map((item) => {
        return `<option value="${item}">${item}</option>`
      })
      .join('')
    $('[name=city]').html(`<option value="">--城市--</option>${cHtml}`)
    // 将区的数据清空
    $('[name=area]').html('<option value="">--地区--</option>')
  } else if (type === 'area') {
    // 获取选中的省份
    const pname = provinceData
    // 获取市的数据
    const cname = cityData
    // 调接口
    const { data: areaData } = await request.get('api/area', {
      params: { pname, cname },
    })
    const aHtml = areaData
      .map((item) => {
        return `<option value="${item}">${item}</option>`
      })
      .join('')
    $('[name=area]').html(`<option value="">--地区--</option>${aHtml}`)
  }
}

// 添加和修改模态框
const myModal = new bootstrap.Modal('#modal')

// 点击'+'按钮，弹出添加学生的模态框
$('#openModal').click(function () {
  openModal()
})

// 学生列表
renderList()
async function renderList() {
  const { data } = await request.get('students')
  const listHtml = data
    .map(
      (item) =>
        `<tr>
     <td>${item.name}</td>
     <td>${item.age}</td>
     <td>${item.gender === 1 ? '女' : '男'}</td>
     <td>第${item.group}组</td>
     <td>${item.hope_salary}</td>
     <td>${item.salary}</td>
     <td>${item.province + ' ' + item.city + ' ' + item.area}</td>
     <td>
       <a data-id="${
         item.id
       }" href="javascript:;" class="edit text-success mr-3"><i class="bi bi-pen"></i></a>
       <a data-id="${
         item.id
       }" href="javascript:;" class="del text-danger"><i class="bi bi-trash"></i></a>
     </td>
   </tr>`
    )
    .join('')
  // 追加到dom中
  $('.list').html(listHtml)
  // 更改学生数量
  $('.total').html(data.length)
  // 学生删除
  $('.del').click(async function () {
    if (!window.confirm('你确定要删除数据吗')) return
    // 获取要删除的学生id
    const id = $(this).data('id') - 0
    try {
      // 调api接口进行删除
      await request.delete(`students/${id}`)
      info({ message: '删除成功' })
      // 重新渲染列表
      renderList()
    } catch (err) {
      info({ message: err.response.data.message, type: 'error' })
    }
  })

  // 点击修改按钮，打开修改学生对话框
  $('.edit').click(function () {
    // 获取要修改的数据id
    const id = $(this).data('id')
    openModal(id)
  })
}

// 打开添加或者修改的模态框
async function openModal(id = '') {
  // 添加时直接打开模态框，而修改时需要做表单数据的回显
  if (id) {
    // 修改操作，进行数据的回显
    const { data: student } = await request.get(`students/${id}`)
    // 手动发请求获取市和区的所有数据
    await getOption('city', student.province)
    await getOption('area', student.province, student.city)
    // 回显表单数据
    $('#form [name]').each(function (i, item) {
      if (item.type === 'radio') {
        // 单选框：根据checked属性来判断是否选中的
        $('[name=gender]').each(function (index, item) {
          if (item.value === student.gender + '') {
            item.checked = true
          }
        })
      } else {
        // 除了单选框和复选框，其他都可以使用value值进行赋值
        item.value = student[item.name]
      }
    })
    // 更改标题
    $('.modal-title').html('修改学生')
    // 打开模态框
    myModal.show()
  } else {
    // 添加
    $('.modal-title').html('添加学生')
    // 打开模态框
    myModal.show()
  }

  // 监听模态框关闭事件
  $('#modal')[0].addEventListener('hidden.bs.modal', (event) => {
    // console.log('我关闭了')
    // 清空表单选项
    $('#form')[0].reset()
  })
}

// 进行数据库的添加或修改
$('#submit').click(async function () {
  // 获取表单数据
  const formData = serialize($('#form')[0],{hash:true})
  const name = formData.name || ''
  const age = formData.age - 0 || ''
  const gender = formData.gender - 0
  const province = formData.province || ''
  const city = formData.city || ''
  const area = formData.area || ''
  const hope_salary = formData.hope_salary - 0 || ''
  const salary = formData.salary - 0 || ''
  const group = formData.group - 0 || ''
  // 获取隐藏域的id数据
  const id = formData.id || ''
  // 数据校验
  if (!/^[\u4e00-\u9fa5]{1,5}$/.test(name)) {
    return info({ type: 'error', message: '学生姓名不能为空且必须是1-4个中文' })
  }

  if (!/^(1[5-9])|(2\d)|(3[0-5])$/.test(age)) {
    return info({ type: 'error', message: '学生年龄必填且在15-35之间' })
  }
  if (!/^[1-8]$/.test(group)) {
    return info({ type: 'error', message: '组号只能是1-8之间的数字' })
  }
  if (province.length === 0) {
    return info({ type: 'error', message: '省份必填' })
  }
  if (city.length === 0) {
    return info({ type: 'error', message: '城市必填' })
  }
  if (area.length === 0) {
    return info({ type: 'error', message: '地区必填' })
  }
  if (!/^[1-9]\d+$/.test(hope_salary)) {
    return info({ type: 'error', message: '期望薪资必填且是正整数' })
  }
  if (!/^[1-9]\d+$/.test(salary)) {
    return info({ type: 'error', message: '实际薪资必填且是正整数' })
  }
  // 数据全部验证通过
  let postData = {
    name,
    age,
    gender,
    group,
    province,
    city,
    area,
    hope_salary,
    salary,
  }
  try {
    if (id) {
      // 修改
      await request.put(`students/${id}`, postData)
      info({ message: '修改成功' })
    } else {
      // 添加
      await request.post('students', postData)
      info({ message: '添加成功' })
    }
    // 关闭模态框
    myModal.hide()
    // 重新渲染
    renderList()
  } catch (err) {
    info({ type: 'error', message: err.response.data.message })
  }
})
